<template>
	<view class='content flex-justify-center'>
		<view class="register-box-content">
			<u--form labelPosition="left" :model="model" :rules="rules" ref="form1">
				<u-form-item label="账号:" prop="userInfo.username" borderBottom ref="item1">
					<u--input placeholder="请输入账号" v-model="model.userInfo.username" border="none"></u--input>
				</u-form-item>
				<u-form-item label="密码:" prop="userInfo.password" borderBottom ref="item1">
					<u--input placeholder="请输入密码" password='true' v-model="model.userInfo.password" border="none">
					</u--input>
				</u-form-item>
				<u-form-item label="姓名:" prop="userInfo.nickname" borderBottom ref="item1">
					<u--input placeholder="请输入姓名" v-model="model.userInfo.nickname" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth='80' label="审核人ID:" prop="userInfo.leader" borderBottom ref="item1">
					<u--input placeholder="请输入项目审核人ID" v-model="model.userInfo.leader" border="none"></u--input>
				</u-form-item>
				<u-form-item label="性别:" prop="userInfo.sexn" borderBottom @click="showSex = true;" ref="item1">
					<u--input v-model="model.userInfo.sexn" disabled disabledColor="#ffffff" placeholder="请选择性别"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</u--form>
			<view class="btn-box flex-center">
				<view class="btn">
					<u-button type="primary" text="注册" @click="registerData"></u-button>
				</view>
			</view>
		</view>

		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect">
		</u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showSex: false,
				model: {
					userInfo: {
						username: '',
						nickname: '',
						sex: '',
						sexn: '',
						password: '',
						age: '',
						leader: '',
						idCard: '',
						phone: '',
						idCardPicture: '', // 身份证图片名称
						profilePicture: '' // 头像图片名称
					},
				},
				actions: [{
						name: '男',
						value: '0',
					},
					{
						name: '女',
						value: '1',
					},
				],
				rules: {
					'userInfo.username': {
						type: 'string',
						required: true,
						message: '请填写账号',
						trigger: ['blur', 'change']
					},
					'userInfo.password': {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
					'userInfo.nickname': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					/* 	'userInfo.age': {
							type: 'string',
							required: true,
							message: '请填写年龄',
							trigger: ['blur', 'change']
						}, */
					/* 'userInfo.leader': {
						type: 'string',
						required: true,
						message: '请填写审核人ID',
						trigger: ['blur', 'change']
					},
					'userInfo.leader': {
						type: 'string',
						required: true,
						message: '请填写审核人ID',
						trigger: ['blur', 'change']
					}, */
					/* 'userInfo.idCard': {
						type: 'string',
						max: 18,
						min: 18,
						required: true,
						message: '请填写正确证件号码',
						trigger: ['blur', 'change']
					}, */
					/* 'userInfo.phone': {
						type: 'string',
						max: 11,
						min: 11,
						required: true,
						message: '请填写正确手机号',
						trigger: ['blur', 'change']
					}, */
					/* 'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					}, */
				},
				radio: '',
				switchVal: false,
				fileList6: [],
				fileList1: [],
				arr: [1, 2]
			}
		},
		methods: {
			// 注册接口
			gologin() {
				this.$refs.form1.validate().then(resd => {
					if (this.fileList1.length == 0 || this.fileList6.length == 0) {
						uni.$u.toast('请上传头像和身份证')
					} else {
						this.sendData()
					}
				}).catch(errors => {
					uni.$u.toast('请填写完整信息')
				})
			},
			// 发送连接 
			async sendData() {
				let touPhoto = await this.updateImg(this.fileList1)
				this.model.userInfo.profilePicture = touPhoto.name
				let shenPhoto = await this.updateImg(this.fileList6)
				this.model.userInfo.idCardPicture = shenPhoto.name
				await this.registerData()
			},
			// 判断两次输入的密码是否正确
			judgePassword() {
				if (this.password === this.password2) {
					return true
				} else {
					return false
				}
			},
			// 性别选择
			sexSelect(e) {
				this.model.userInfo.sexn = e.name
				this.model.userInfo.sex = e.value
				this.$refs.form1.validateField('userInfo.sex')
			},
			// 删除身份证图片
			deletePic(event) {
				this.fileList6.splice(event.index, 1)
			},
			// 身份证图片 
			afterRead(event) {
				this.fileList6.push(...event.file)
			},
			// 头像删除
			deletePicTou(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 上传头像
			afterReadTou(event) {
				this.fileList1.push(...event.file)
			},
			// 上传图片
			updateImg(val) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: 'https://www.xiaowu-iot.com/api/admin/file/upload/picture',
						filePath: val[0].url,
						name: 'file',
						formData: {
							file: val[0]
						},
						success: (resd) => {
							let data = JSON.parse(resd.data)
							resolve(data.data)
							console.log(`上传成功提示信息${resd.message}`)
						},
						error: (re) => {
							console.log(re)
						}
					})
				})

			},
			// 注册请求接口
			registerData() {
				this.$post('/security/users/registration', this.model.userInfo).then(res => {
					if (res.code === 500) {
						uni.$u.toast(res.message)
					} else {
						uni.setStorageSync('username', this.model.userInfo.username)
						uni.setStorageSync('possword', this.model.userInfo.password)
						uni.$u.toast("注册成功,等待审核")
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}
				})
				/* this.$refs.form1.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						this.$post('/security/users/registration', this.model.userInfo).then(res => {
							if (res.code === 500) {
								uni.$u.toast(res.message)
							} else {
								uni.setStorageSync('username', this.model.userInfo.username)
								uni.setStorageSync('possword', this.model.userInfo.password)
								uni.$u.toast("注册成功,等待审核")
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						})
					}
				}); */

			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
	}

	.btn-box {
		width: 700rpx;
		margin-bottom: 50rpx;
		margin-top: 50rpx;
	}

	.btn {
		width: 600rpx;
	}

	.headeruser-image {
		width: 750rpx;
		height: 100%;
		position: absolute;
		z-index: 0;
	}

	.headeruser-image>image {
		width: 750rpx;
		height: 100%;
	}

	.main-body {
		width: 750rpx;
		height: 100%;
		position: absolute;
		z-index: 1;
	}

	.register-box {
		width: 750rpx;
		height: 100%;
		padding-left: 50px;
		padding-right: 50px;
		align-items: flex-start;
	}

	.out-login {
		font-size: 13px;
		margin-top: 15px;
		color: #FFFFFF;
		text-decoration: underline
	}

	.register-box-content {
		width: 700rpx;
	}
</style>